<template>
    <div class="works" >
        <div class="content">
            <div class="content__slideshow">
                <div class="content__slideshow__swiperImg">
                    <el-carousel :interval="2000" arrow="always" height="400px" autoplay>
                        <el-carousel-item v-for="item in swiperDate" :key="item">
                            <img :src="item.imgUrl" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="content__bottom" >
                <ItemSizer ref="itemsizer" :sizerdata="sizer" :itemname="'作品'" @pushkeyword="getkeyword"
                    @pushuoid="getuoid" v-if="!isRaceWorks">
                </ItemSizer>
                <div class="content__bottom__items" v-loading="loading" element-loading-text="Loading..." element-loading-background="rgb(255,255,255,0.95)">
                    <UserWork class="UserWork" v-for="item in worksdata.value" :workId="item.workId" :key="item.workId" :title="item.workName"
                        :des="item.workDescription" :author="item.nickName" :time="item.createTime"
                        :img-url="item.workCouerPath"></UserWork>

                    <div class="not-works" v-if="total == 0">
                        <el-empty description=" " />
                        <p>暂无作品！敬请期待！</p>
                    </div>
                </div>
                <div class="content__bottom_switchpag" v-if="total !==0">
                    <div class="pag">
                        <el-pagination :current-page="currentPage" :page-size="12" :total="total"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
  
<script setup>
import UserWork from "../components/UserWork.vue";
import ItemSizer from "../components/ItemSizer.vue";
import { ref, reactive, onMounted,onUnmounted } from "vue";
import { GetWorks, GetRaceWorks } from '@/api/front/contest';
import store from "@/store";
import { useRoute } from "vue-router";

const loading = ref(true)
const route = useRoute();
const isRaceWorks = store.state.isRaceWorks;//是否是比赛作品
console.log('isRaceWorks', isRaceWorks)
let worksdata = reactive([]);//作品数据初始化
let sizer = [];//筛选框数据初始化
let total = ref(0)//作品总和初始化

if (sessionStorage.getItem('worksData') && !isRaceWorks) {
    worksdata.value = JSON.parse(sessionStorage.getItem('worksData')).pageList
    total.value = JSON.parse(sessionStorage.getItem('worksData')).total
} 
let data = {
    //GetWorks接口获取作品数据的参数初始化
    workType: "",
    workStatus: "",
    workName: "",
    page_num: 1,
    page_size: 12,

}

const data2 = ref({
    //GetRaceWorks接口获取作品数据的参数初始化
    id: route.params.id,
    page_num: 1,
    page_size: 12,
})

// 获取作品数据
const getworks = async () => {
    loading.value = true
    await GetWorks(data).then(async res => {
        sessionStorage.setItem('worksData', JSON.stringify(res.data))
        worksdata.value = res.data.pageList//拿到作品数据
        console.log('res', data, worksdata.value)
        total.value = res.data.total
        loading.value = false
    }).catch((err) => {
        console.log('err', err);
    }) //请失败后的处理结果

}

// 获取赛事作品
const getRaceWorks = async () => {
    loading.value = true
    const res = await GetRaceWorks(data2.value)
    worksdata.value = res.data.pageList
    total.value = res.data.total
    console.log('res', data2.value,res, worksdata.value)
    loading.value = false
}


// 筛选作品
const getuoid = (n) => {
    if (n == undefined) { n = 0 }//避免报错
    if (n[0] == 0) {//点击“全部”按钮时
        data.workType = ''
    } else {
        data.workType = n[0] - 1//因为筛选有一个“全部”选项id为0，就是说筛选框是"0全部、1未开始",数据是"0未开始、1报名中"所以需要减1
    }
    data.page_num = 1
    data.workName = ""//不受搜索影响
    getworks()//重新获取作品数据
    currentPage.value = 1//分页器组件的当前页为1
}
//搜索作品(对全部的作品进行筛选)
const getkeyword = (keyword) => {
    data.page_num = 1
    data.workType = ""//不受筛选影响
    data.workName = keyword.value
    getworks()//重新获取作品数据
    currentPage.value = 1//分页器组件的当前页为1
}

const currentPage = ref(1);//作品分页的当前页
// 当当前页改变时触发
const handleCurrentChange = (val) => {
    currentPage.value = val;
    if (isRaceWorks) {
        data2.value.page_num = val
        getRaceWorks()
        return
    }
    data.page_num = val
    getworks()//重新获取作品数据
};

const itemsizer = ref()//获得筛选器组件以便使用getsizeid方法
onMounted(async () => {
    window.scrollTo(0, 0)
    sizer = sizerData;//组件挂载时获取筛选框数据
    // 组件挂载时默认每个筛选列的第一个
    if (!isRaceWorks) {
        for (let i = 0; i < sizer.length; i++) {
            itemsizer.value.getsizeid(i, 0)
        }
    } else {
        getRaceWorks()
    }
});
// 销毁组件时清空sessionStorage
onUnmounted(() => {
    store.commit('setRaceWorksState', false)
})

// 轮播图的图片
const swiperDate = [
    { imgUrl: 'https://publicqn.saikr.com/2023/09/25/contest6511027e7e8442.553193131695613600951.png', alt: '轮播图描述' },
    { imgUrl: 'https://publicqn.saikr.com/2023/09/18/contest6507eb82a20be5.594664931695017871906.png', alt: '轮播图描述' },
    { imgUrl: 'https://publicqn.saikr.com/2023/06/16/contest648bcfbb5a04c1.122757331686884296371.png', alt: '轮播图描述' },
    { imgUrl: 'https://publicqn.saikr.com/2023/09/20/contest650a727f69b800.197031861695183489383.png?imageView2/2/w/2160', alt: '轮播图描述' },
    { imgUrl: 'https://publicqn.saikr.com/2023/08/18/contest64df4133d3d551.424172211692352841390.png?imageView2/2/w/2160', alt: '轮播图描述' },
]

const sizerData = [
    {
        name: "作品类别",
        options: ["全部", "工科类", "理科类", "文体", "商科", "综合"]
    }
]

</script>
  
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

// 主要内容
.content {
    padding-bottom: 30px;

    // 轮播图
    .content__slideshow {
        width: 100%;
        margin-bottom: 30px;

        .content__slideshow__swiperImg {
            height: 400px;
            background-color: #99a9bf;

            .el-carousel__item:nth-child(2n) {
                background-color: #99a9bf;
            }

            .el-carousel__item:nth-child(2n + 1) {
                background-color: #d3dce6;
            }

            img {
                width: 100%;
                height: 400px;
                cursor: pointer
            }
        }
    }

    $width: 1060px;

    .content__bottom {
        width: $width;
        margin: 0 auto;

        // 筛选器
        .content__bottom__sizer {
            width: $width;
            border: 1px solid rgb(235, 234, 234);
            box-shadow: 3px 3px 8px rgb(170, 170, 170);
            border-radius: 10px;
            padding: 10px;

            .content__bottom__sizer__item {
                display: flex;
                align-items: center;
                margin-bottom: 15px;

                .content__bottom__sizer__item__options {

                    a {
                        margin: 20px;
                        font-size: 14px;
                        text-decoration: none;
                        color: black;
                    }

                    .focus,
                    span>&:active {
                        background-image: linear-gradient(to top, #fed6e3 0%, #b2dedc 100%, );
                        padding: 4px 10px;
                        border-radius: 13px;
                    }
                }
            }

            .content__bottom__sizer__search {
                display: flex;
                align-items: center;

                .content__bottom__sizer__search__box {
                    height: 30px;
                    border: 1px solid #ccc;
                    margin-left: 20px;
                    display: flex;
                    align-items: center;
                    border-radius: 15px;
                    padding: 0 10px;

                    input {
                        height: 25px;
                        border: none;
                        outline: none;
                        background-color: transparent;
                    }

                    .el-icon {
                        margin-left: 5px;
                        cursor: pointer;

                        &:hover {
                            color: #42b983;
                        }
                    }

                }

            }
        }

        // 竞赛
        .content__bottom__items {
            width: $width;
            display: flex;
            flex-flow: wrap;
            margin: 30px 0;

            .UserWork {
                margin-right: 12px;
                margin-bottom: 12px;
            }
            .not-works {
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                color: #ccc;
            }
        }

        // 数字计步器
        .content__bottom_switchpag {
            display: flex;
            align-items: center;
            justify-content: center;

            .pag {
                width: 1280px;
                display: flex;
                justify-content: center;
                margin-top: 20px;
                margin-left: -1%;
            }
        }
    }


}
</style>
  